<template>
  <div>
    <p class="current">
      {{ region }}
    </p>
    <div class="hot">
      <ul class="hotNav">
        <li class="hot-te">热门城市</li>
        <li v-for="(value, index) in hotArr" :key="index">
          {{ value.name }}
        </li>
      </ul>
    </div>
    <div class="all-city">
      <p>A</p>
      <ul>
        <li v-for="(value, index) in allCity.A" :key="index">
          {{ value.name }}
        </li>
      </ul>
      <p>B</p>
      <ul>
        <li v-for="(value, index) in allCity.B" :key="index">
          {{ value.name }}
        </li>
      </ul>
      <p>C</p>
      <ul>
        <li v-for="(value, index) in allCity.C" :key="index">
          {{ value.name }}
        </li>
      </ul>
      <p>D</p>
      <ul>
        <li v-for="(value, index) in allCity.D" :key="index">
          {{ value.name }}
        </li>
      </ul>
    </div>
  </div>
</template>
<style scoped>
* {
  margin: 0;
  padding: 0;
  font-size: 0.16rem;
}
.current {
  height: 0.6rem;
  width: 100%;
  border: 1px solid #000;
  line-height: 0.6rem;
}
.hot {
  width: 100%;
  overflow: hidden;
}
.hotNav,
.all-city {
  width: 100%;
  overflow: hidden;
}
.hotNav li {
  float: left;
  width: 25%;
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  margin-top: 0.1rem;
}
.hotNav .hot-te {
  width: 100%;
}

li {
  list-style: none;
}
.all-city p {
  width: 100%;
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
}
.all-city ul {
  width: 100%;
  overflow: hidden;
}
.all-city li {
  width: 33%;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
  float: left;
  border: 1px solid #000;
  box-sizing: border-box;
}
</style>
<script>
import myhead from "../components/coma1.vue";
export default {
  components: {
    myHead: myhead,
  },
  data() {
    return {
      region: "",
      obj: { A: [{ name: 123 }] },
      hotArr: {},
      allCity: {},
      ceshi: {},
      letter: [],
      t: "城市选择",
    };
  },
  methods: {},
  mounted() {
    /* 当前城市 */
    this.axios("http://elm.cangdu.org/v1/cities?type=guess").then((res) => {
      console.log(res);
      this.region = res.data.name;
    });
    /* 热门城市 */
    this.axios("http://elm.cangdu.org/v1/cities?type=hot").then((hot) => {
      this.hotArr = hot.data;
      console.log(this.hotArr);
    });
    /* 全部城市接口 */
    this.axios("http://elm.cangdu.org/v1/cities?type=group").then((quan) => {
      this.allCity = quan.data;
      this.letter = quan.data;
      console.log(quan);
    });
  },
};
</script>
